<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		html, body {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: black;
		}

		.loader {
			width: 150px;
			height: 150px;
			position: relative;
		}

		.loader span {
			position: absolute;
			box-sizing: border-box;
			border: 10px solid dimgray;
			border-radius: 2px;
			animation: rotating linear infinite;
		}

		.loader span:nth-child(1) {
			width: 100%;
			height: 100%;
			animation-duration: 4s;
			z-index: 3;
		}

		.loader span:nth-child(2) {
			width: 70%;
			height: 70%;
			margin: 15%;
			animation-duration: 2s;
			z-index: 2;
		}

		.loader span:nth-child(3) {
			width: 40%;
			height: 40%;
			margin: 30%;
			animation-duration: 1s;
			z-index: 1;
		}

		.loader span::before,
		.loader span::after {
			content: '';
			position: absolute;
			width: 10px;
			height: 50%;
			background-color: gold;
		}

		.loader span::before {
			top: -10px;
			left: -10px;
		}

		.loader span::after {
			bottom: -10px;
			right: -10px;
		}

		@keyframes rotating {
			from {
				transform: rotateY(0deg);
			}

			to {
				transform: rotateY(360deg);
			}
		}
	</style>
</head>
<body>


	<div class="loader">
		<span></span>
		<span></span>
		<span></span>
	</div>
</body>

</html>